<template>
  <div class="flowchart-example">
    <n-card title="流程图示例数据生成器">
      <n-space vertical>
        <n-button @click="generateExample('simple')">生成简单示例</n-button>
        <n-button @click="generateExample('complex')">生成复杂示例</n-button>
        <n-button @click="generateExample('game')">生成游戏任务流程示例</n-button>
      </n-space>
      
      <template #footer>
        <n-code :code="generatedCode" language="json" />
      </template>
    </n-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { NCard, NSpace, NButton, NCode } from 'naive-ui'
import type { FlowchartNode, FlowchartEdge } from '@/api/taskFlowchart'

const generatedCode = ref('')

function generateExample(type: string) {
  let nodes: FlowchartNode[] = []
  let edges: FlowchartEdge[] = []
  
  if (type === 'simple') {
    nodes = [
      { id: 'start1', type: 'start', label: '开始', position: { x: 100, y: 100 } },
      { id: 'task1', type: 'task', label: '任务1', position: { x: 300, y: 100 } },
      { id: 'end1', type: 'end', label: '结束', position: { x: 500, y: 100 } }
    ]
    edges = [
      { id: 'edge1', source: 'start1', target: 'task1' },
      { id: 'edge2', source: 'task1', target: 'end1' }
    ]
  } else if (type === 'complex') {
    nodes = [
      { id: 'start1', type: 'start', label: '开始', position: { x: 400, y: 50 } },
      { id: 'task1', type: 'task', label: '初始化', position: { x: 400, y: 150 } },
      { id: 'decision1', type: 'decision', label: '条件判断', position: { x: 400, y: 250 } },
      { id: 'task2', type: 'task', label: '处理A', position: { x: 200, y: 350 } },
      { id: 'task3', type: 'task', label: '处理B', position: { x: 600, y: 350 } },
      { id: 'task4', type: 'task', label: '合并结果', position: { x: 400, y: 450 } },
      { id: 'end1', type: 'end', label: '结束', position: { x: 400, y: 550 } }
    ]
    edges = [
      { id: 'edge1', source: 'start1', target: 'task1' },
      { id: 'edge2', source: 'task1', target: 'decision1' },
      { id: 'edge3', source: 'decision1', target: 'task2', label: '条件A' },
      { id: 'edge4', source: 'decision1', target: 'task3', label: '条件B' },
      { id: 'edge5', source: 'task2', target: 'task4' },
      { id: 'edge6', source: 'task3', target: 'task4' },
      { id: 'edge7', source: 'task4', target: 'end1' }
    ]
  } else if (type === 'game') {
    nodes = [
      { id: 'start1', type: 'start', label: '任务开始', position: { x: 100, y: 200 } },
      { id: 'task1', type: 'task', label: '接受任务', position: { x: 250, y: 200 } },
      { id: 'task2', type: 'task', label: '前往指定地点', position: { x: 400, y: 200 } },
      { id: 'decision1', type: 'decision', label: '是否遇敌？', position: { x: 550, y: 200 } },
      { id: 'task3', type: 'task', label: '战斗', position: { x: 550, y: 100 } },
      { id: 'task4', type: 'task', label: '收集物品', position: { x: 700, y: 200 } },
      { id: 'decision2', type: 'decision', label: '物品是否足够？', position: { x: 850, y: 200 } },
      { id: 'task5', type: 'task', label: '返回NPC', position: { x: 1000, y: 200 } },
      { id: 'task6', type: 'task', label: '继续收集', position: { x: 700, y: 350 } },
      { id: 'end1', type: 'end', label: '任务完成', position: { x: 1150, y: 200 } }
    ]
    edges = [
      { id: 'edge1', source: 'start1', target: 'task1' },
      { id: 'edge2', source: 'task1', target: 'task2' },
      { id: 'edge3', source: 'task2', target: 'decision1' },
      { id: 'edge4', source: 'decision1', target: 'task3', label: '是' },
      { id: 'edge5', source: 'decision1', target: 'task4', label: '否' },
      { id: 'edge6', source: 'task3', target: 'task4' },
      { id: 'edge7', source: 'task4', target: 'decision2' },
      { id: 'edge8', source: 'decision2', target: 'task5', label: '是' },
      { id: 'edge9', source: 'decision2', target: 'task6', label: '否' },
      { id: 'edge10', source: 'task6', target: 'decision1' },
      { id: 'edge11', source: 'task5', target: 'end1' }
    ]
  }
  
  generatedCode.value = JSON.stringify({ nodes, edges }, null, 2)
}
</script>

<style scoped>
.flowchart-example {
  padding: 20px;
}
</style>